<template>
  <!-- 用户编辑页面 -->
  <el-main>
    <!--      面包屑        -->
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!--        表单      -->
    <el-form :model="form" label-width="120px" :label-position="'top'">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="13" :md="14" :lg="14" :xl="14">
          <el-card class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
              </div>
            </template>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户编号">
                  <el-input v-model="form.number" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="手机">
                  <el-input v-model="form.phone" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="QQ">
                  <el-input v-model="form.qq" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="微信">
                  <el-input v-model="form.weixin" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-row :gutter="15">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="年龄">
                      <el-input v-model="form.age" />
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="性别">
                      <el-radio-group v-model="form.gender">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="选择地区">
                  <!-- <elui-china-area-dht
                    :leave="3"
                    @change="onChange"
                  ></elui-china-area-dht> -->
                  <el-cascader
                    v-model="form.area"
                    placeholder="请选择地区"
                    :options="chinaArea"
                    :props="{ value: 'label' }"
                    @change="onChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="form-submit-card">
            <template #header>
              <div
                class="card-header"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>客户资料</span>
                <el-button type="primary" @click="dialogUploadVisible = true"
                  >上传资料</el-button
                >
              </div>
            </template>
            <div class="demo-image__preview">
              <el-divider content-position="left">诊前</el-divider>
              <el-image
                v-for="(url, index) in srcList"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="url"
                :zoom-rate="1.2"
                :preview-src-list="srcList"
                :initial-index="index"
                fit="cover"
              />
            </div>
          </el-card>
          <el-card class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>详细信息</span>
              </div>
            </template>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户级别">
                  <el-select
                    v-model="form.level"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in level_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户状态">
                  <el-select
                    v-model="form.customer_status"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in customer_status_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户来源">
                  <el-select
                    v-model="form.source"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in source_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="所属行业">
                  <el-input v-model="form.industry" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="关键词搜索">
                  <el-input v-model="form.keywords" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="资源类型">
                  <el-select
                    v-model="form.source_type"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in source_type_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="咨询类型">
                  <el-select
                    v-model="form.consult_type"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in consult_type_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="地域属性">
                  <el-select
                    v-model="form.territory_attribute"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in territory_attribute_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="备注">
                  <el-input v-model="form.desc" type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="11" :md="10" :lg="10" :xl="10">
          <el-card style="padding-bottom: 30px" class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>其他</span>
              </div>
            </template>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="类型">
                  <el-select
                    v-model="form.type"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in type_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="意向医院">
                  <el-select
                    v-model="form.hospital_id"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in hospital_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="是否进院">
                  <el-select
                    v-model="form.is_hospital"
                    placeholder="Select"
                    style="width: 100%"
                    disabled
                  >
                    <el-option
                      v-for="item in is_hospital_options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="是否有效">
                  <el-select
                    v-model="form.status"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in status_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="成交金额">
                  <el-input v-model="form.trading_volume" readonly disabled />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="跟进人" style="display: none">
                  <el-input v-model="form.user_id" readonly disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="padding-bottom: 30px" class="form-submit-card">
            <template #header>
              <div
                class="card-header"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>回访信息</span>
                <el-button type="primary" @click="dialogFormVisible = true"
                  >填写回访</el-button
                >
              </div>
            </template>
            <!--     跟进信息只显示最新三条       -->
            <div style="margin-bottom: 15px">
              <el-descriptions
                class="margin-top"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">途径</div>
                  </template>
                  电话
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">状态</div>
                  </template>
                  已跟进
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访级别</div>
                  </template>
                  Wa+（未成交意向高，本周有计划）
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访日期</div>
                  </template>
                  2023/04/03
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访内容</div>
                  </template>
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  Province
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="margin-bottom: 15px">
              <el-descriptions
                class="margin-top"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">途径</div>
                  </template>
                  电话
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">状态</div>
                  </template>
                  已跟进
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访级别</div>
                  </template>
                  Wa+（未成交意向高，本周有计划）
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访日期</div>
                  </template>
                  2023/04/03
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访内容</div>
                  </template>
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  Province
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="margin-bottom: 15px">
              <el-descriptions
                class="margin-top"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">途径</div>
                  </template>
                  电话
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">状态</div>
                  </template>
                  已跟进
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访级别</div>
                  </template>
                  Wa+（未成交意向高，本周有计划）
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访日期</div>
                  </template>
                  2023/04/03
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">回访内容</div>
                  </template>
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  Province
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!--    跟进显示分页        -->
            <el-pagination layout="prev, pager, next" :total="1000" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="13" :md="14" :lg="14" :xl="14">
          <el-card class="form-submit-card">
            <el-form-item style="margin-bottom: 0">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button>重置</el-button>
              <el-button type="success" @click="dialogBookingVisible = true"
                >预约</el-button
              >
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </el-main>
  <!-- 上传资料 start -->
  <el-dialog v-model="dialogUploadVisible" title="上传资料" width="40%">
    <el-form :model="form">
      <el-form-item label="资料标题" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="上传资料"
        :label-width="formLabelWidth"
        style="width: 100%"
      >
        <el-upload
          v-model:file-list="fileList"
          class="upload-customer-file"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          list-type="picture"
          style="width: 100%"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogUploadVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogUploadVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 上传资料 end -->
  <!-- 填写回访 start -->
  <el-dialog v-model="dialogFormVisible" title="填写回访" width="40%">
    <template #default>
      <followEdit @closeVisiteDialog="closeVisiteDialog"></followEdit>
    </template>
  </el-dialog>
  <!-- 填写回访 end -->
  <!-- 预约 start-->
  <el-dialog v-model="dialogBookingVisible" title="预约客户" width="40%">
    <el-form :model="form">
      <el-form-item label="意向医院" :label-width="formLabelWidth">
        <el-select
          v-model="form.customer_status"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="预约日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="Select date and time"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogBookingVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogBookingVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 预约 end -->
</template>

<script lang="ts" setup>
import { reactive } from "vue";

import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import { EluiChinaAreaDht } from "elui-china-area-dht";
import followEdit from "../follow/edit.vue";
import { chinaArea } from "../../../util/chinaArea";
import { addNewCustomer } from "../../../request/api";
// //上传客户资料
const dialogUploadVisible = ref(false);
//填写回访
const dialogFormVisible = ref(false);
//预约
const dialogBookingVisible = ref(false);

const formLabelWidth = "140px";
// do not use same name with ref
const form = reactive({
  number: "", //客户编号
  type: "", //integer 类型
  user_id: "", //integer 跟进人
  name: "",
  phone: "",
  qq: "",
  weixin: "",
  country: "",
  province: "",
  city: "",
  district: "",
  address: "",
  resource_url: {}, //资料上传json
  status: "", //integer 是否有效
  gender: "", //integer
  age: "",
  level: "", //客户级别
  customer_status: "", //客户状态
  is_hospital: "", //是否进院
  source: "", //客户来源
  industry: "", //所属行业
  trading_volume: "", //成交金额
  keywords: "", //关键词搜索
  source_type: "", //资源类型
  consult_type: "", //integer 咨询类型
  hospital_id: "", //integer 意向医院
  territory_attribute: "", //integer 地域属性
  desc: "", // 备注
  area: [],
});

const options = reactive([{ value: "", label: "" }]);
const level_options = reactive([
  { value: "1", label: "级别1" },
  { value: "2", label: "级别2" },
  { value: "3", label: "级别3" },
]);
const customer_status_options = reactive([
  { value: "1", label: "状态1" },
  { value: "2", label: "状态2" },
  { value: "3", label: "状态3" },
]);
const source_options = reactive([
  { value: "1", label: "来源1" },
  { value: "2", label: "来源2" },
  { value: "3", label: "来源3" },
]);
const source_type_options = reactive([
  { value: "1", label: "资源类型1" },
  { value: "2", label: "资源类型2" },
  { value: "3", label: "资源类型3" },
]);
const consult_type_options = reactive([
  { value: "1", label: "咨询类型1" },
  { value: "2", label: "咨询类型2" },
  { value: "3", label: "咨询类型3" },
]);
const territory_attribute_options = reactive([
  { value: "1", label: "地域属性1" },
  { value: "2", label: "地域属性2" },
  { value: "3", label: "地域属性3" },
]);
const type_options = reactive([
  { value: "1", label: "类型1" },
  { value: "2", label: "类型2" },
  { value: "3", label: "类型3" },
]);
const hospital_options = reactive([
  { value: "1", label: "意向医院1" },
  { value: "2", label: "意向医院2" },
  { value: "3", label: "意向医院3" },
]);
const is_hospital_options = reactive([
  { value: "1", label: "是" },
  { value: "2", label: "否" },
]);
const status_options = reactive([
  { value: "1", label: "是" },
  { value: "2", label: "否" },
]);

const size = ref("default");

const onSubmit = () => {
  console.log("submit!");

  if (form.area.length) {
    form.province = form.area[0];
    form.city = form.area[1];
    form.district = form.area[2];
  }
  addNewCustomer(form)
    .then((res) => {
      console.log("成功");
      console.log(res);
    })
    .catch((err) => {
      console.log("失败");
      console.log(err);
    });
};

const value1 = ref(true);

//客户资料
const url =
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
const srcList = [
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
];
//客户资料上传
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food2.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
]);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (file) => {
  console.log(file);
};

const onChange = () => {
  console.log("地區組件的切換");
};

const closeVisiteDialog = (payload: {
  operate: String;
  visitData?: Object;
}) => {
  console.log("点击来", payload);
  if (payload.operate === "confirm") {
    //TODO:添加数据
  }
  dialogFormVisible.value = false;
};
</script>

<style scoped>
.form-submit-card {
  margin-bottom: 15px;
}
/*主体内容样式 end*/
</style>
